<script setup lang="ts">
import { ref, reactive } from "vue";
import { $ref } from "vue/macros";

const menuConfig = reactive({
  tabBarList: [
    {
      name: "资料指引",
      children: [
        {
          name: "资料A",
          src: "",
        },
      ],
      style: `height: 0;transition: 1s`,
    },
    {
      name: "个人中心",
      src: "",
      children: [
        {
          name: "用户指引",
          src: "",
        },
        {
          name: "用户指引2",
          src: "",
        },
      ],
      style: `height: 0;transition: 1s`,
    },
    {
      name: "用户中心",
      src: "",
      children: [
        {
          name: "用户指引",
          src: "",
        },
      ],
      style: `height: 0;transition: 1s`,
    },
    {
      name: "精美壁纸",
      src: "",
      children: [
        {
          name: "用户指引",
          src: "",
        },
      ],
      style: `height: 0;transition: 1s`,
    },
    {
      name: "关于",
      src: "",
      children: [
        {
          name: "用户指引",
          src: "",
        },
      ],
      style: `height: 0;transition: 1s`,
    },
  ],
});

// 移入高度动画
function hoverEvent(event: MouseEvent, item: any) {
  if (item.children.length > 0) {
    menuConfig.tabBarList.find((v) => v.name === item.name)!.style = `height: ${
      50 * item.children.length
    }px;transition: .4s`;
  }
}

// 移出高度动画
function leaveEvent(event: MouseEvent, item: any) {
  if (item.children.length > 0) {
    menuConfig.tabBarList.find(
      (v) => v.name === item.name
    )!.style = `height: 0px;transition: .4s`;
  }
}
</script>

<template>
  <div class="tabBar-container">
    <div class="tabBar-outter-box">
      <div
        class="tabBar-child"
        v-for="(item, index) in menuConfig.tabBarList"
        :key="index"
        @mouseover="(event: MouseEvent) => hoverEvent(event, item)"
        @mouseleave="(event: MouseEvent) => leaveEvent(event, item)"
      >
        {{ item.name }}
        <div
          v-if="item.children.length > 0"
          class="tabBar-hide-children"
          :style="item.style"
        >
          <div
            v-for="(childItem, childIndex) in item.children"
            :key="childIndex"
            class="tabBar-hide-child"
          >
            {{ childItem.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tabBar-container {
  width: 100vw;
  height: 50px;
  position: fixed;
  left: 0;
  top: 0;
  .tabBar-outter-box {
    width: 100%;
    height: 100%;
    display: flex;
    .tabBar-child {
      flex: 1;
      background: gray;
      @include Center;
      position: relative;
      z-index: 20;

      .tabBar-hide-children {
        position: absolute;
        width: 100%;
        top: 100%;
        left: 0;
        overflow: hidden;
        background: gray;

        .tabBar-hide-child {
          width: 100%;
          height: 50px;
          @include Center;
        }
      }
    }
  }
}
</style>
